<template>
  <view class="flex-center">
    <view :class="'wf-page wf-page' + type">
      <!--    left    -->
      <view>
        <view id="left" v-if="leftList?.length">
          <view
            :class="`selector-query-id-${item?.id || item?.product_id}`"
            v-for="(item, index) in leftList"
            :key="index"
            class="wf-item"
            @tap="itemTap(item)"
          >
            <WaterfallsFlowItem
              :newcomer="newcomer"
              :types="types"
              :item="item"
              :isStore="isStore"
              :type="type"
              @goShop="goShop"
            />
          </view>
        </view>
      </view>
      <!--    right    -->
      <view>
        <view id="right" v-if="rightList?.length">
          <view
            :class="`selector-query-id-${item?.id || item?.product_id}`"
            v-for="(item, index) in rightList"
            :key="index"
            class="wf-item"
            @tap="itemTap(item)"
          >
            <WaterfallsFlowItem
              :newcomer="newcomer"
              :types="types"
              :item="item"
              :isStore="isStore"
              :type="type"
              @goShop="goShop"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import WaterfallsFlowItem from '../WaterfallsFlowItem/WaterfallsFlowItem.vue'

export default {
  components: {
    WaterfallsFlowItem,
  },
  props: {
    // 瀑布流列表
    wfList: {
      type: Array,
      require: true,
    },
    updateNum: {
      type: Number,
      default: 10,
    },
    type: {
      type: Number,
      default: 0,
    },
    isStore: {
      type: [String, Number],
      default: '1',
    },
    types: {
      type: String,
      default: '',
    },
    newcomer: {
      tyle: Number,
      default: 0,
    },
  },
  data() {
    return {
      allList: [], // 全部列表
      leftList: [], // 左边列表
      rightList: [], // 右边列表
      mark: 0, // 列表标记
      boxHeight: [], // 下标0和1分别为左列和右列高度
    }
  },
  watch: {
    // 监听列表数据变化
    wfList: {
      handler(nVal, oVal) {
        // 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
        if (
          !this.wfList?.length ||
          (this.wfList?.length === this.updateNum && this.wfList?.length <= this.allList?.length)
        ) {
          this.allList = []
          this.leftList = []
          this.rightList = []
          this.boxHeight = []
          this.mark = 0
        }

        // 如果列表有值，调用waterfall方法
        if (this.wfList?.length) {
          this.allList = this.wfList
          this.leftList = []
          this.rightList = []
          this.boxHeight = []
          this.allList.forEach((v, i) => {
            if (
              this.allList.length < 3 ||
              (this.allList.length <= 7 && this.allList.length - i > 1) ||
              (this.allList.length > 7 && this.allList.length - i > 2)
            ) {
              if (i % 2) {
                this.rightList.push(v)
              } else {
                this.leftList.push(v)
              }
            }
          })
          if (this.allList?.length < 3) {
            this.mark = this.allList.length + 1
          } else if (this.allList.length <= 7) {
            this.mark = this.allList.length - 1
          } else {
            this.mark = this.allList.length - 2
          }
          if (this.mark < this.allList.length) {
            this.waterFall()
          }
        }
      },
      immediate: true,
      deep: true,
    },
    mounted() {},

    // 监听标记，当标记发生变化，则执行下一个item排序
    mark() {
      const len = this.allList?.length
      if (this.mark < len && this.mark !== 0 && this.boxHeight?.length) {
        this.waterFall()
      }
    },
  },
  methods: {
    // 瀑布流排序
    waterFall() {
      const i = this.mark
      if (i == 0) {
        // 初始化，从左边开始插入
        this.leftList.push(this.allList[i])
        // 更新左边列表高度
        this.getViewHeight(0)
      } else if (i == 1) {
        // 第二个item插入，默认为右边插入
        this.rightList.push(this.allList[i])
        // 更新右边列表高度
        this.getViewHeight(1)
      } else {
        // 根据左右列表高度判断下一个item应该插入哪边
        if (!this.boxHeight.length) {
          this.rightList.length < this.leftList.length
            ? this.rightList.push(this.allList[i])
            : this.leftList.push(this.allList[i])
        } else {
          const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0
          if (leftOrRight) {
            this.rightList.push(this.allList[i])
          } else {
            this.leftList.push(this.allList[i])
          }
        }
        // 更新插入列表高度
        this.getViewHeight()
      }
    },
    // 获取列表高度
    getViewHeight() {
      // 使用nextTick，确保页面更新结束后，再请求高度
      this.$nextTick(() => {
        setTimeout(() => {
          uni
            .createSelectorQuery()
            .in(this)
            .select('#right')
            .boundingClientRect((res) => {
              res ? (this.boxHeight[1] = res.height) : ''
              uni
                .createSelectorQuery()
                .in(this)
                .select('#left')
                .boundingClientRect((res) => {
                  res ? (this.boxHeight[0] = res.height) : ''
                  this.mark = this.mark + 1
                })
                .exec()
            })
            .exec()
        }, 100)
      })
    },
    // item点击
    itemTap(item) {
      this.$emit('itemTap', item)
    },
    // item点击
    goShop(item) {
      this.$emit('goShop', item)
    },
  },
}
</script>

<style lang="scss" scoped>
$page-padding: 12px;
$grid-gap: 12px;

.wf-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: $grid-gap;
}

.wf-item {
  width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
  padding-bottom: $grid-gap;
}

.wf-page1 .wf-item {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding-bottom: 0;
}

.wf-item-page {
  padding-bottom: 20rpx;
}
</style>
